<template >
  <div>
    <van-nav-bar fixed title="元祖月饼" >
      <template #left>
        <van-popover
  v-model="showPopover"
  trigger="click"
  :actions="actions"
  @select="onSelect"
>
  <template #reference>
    <van-button style="background:#000;border:0"><van-icon name="wap-nav" size="20" /></van-button>
  </template>
</van-popover>
      </template>
      <template #right>
        <van-icon name="user-o" size="20" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '首页' }, { text: '所有产品' }, { text: '购物车' },{text:'会员中心'}],
    };
  },
  methods: {
    onSelect(action) {
      Toast(action.text);
    },
  },
};
</script>

<style lang="scss">
.van-nav-bar__content{
  height: 57px;
  width: 100vw;

}
.van-nav-bar{
  background-color: #000;
  // border-radius: 0.7rem 0.7rem 0 0;
}
.van-icon-user-o:before{
  font-size: 30px;
  color: #fff;
}
.van-icon-wap-nav:before{
  color: #4d4d4d;
  font-size: 30px;
}
.van-nav-bar__title{
  color: #fff;
  font-size: 20px;
}

.van-nav-bar__left,
.van-nav-bar__right{
  padding: 0 6.3vw;
}
</style>